<template>
	<pager ref="pager" @loadData="loadData" navbar :height="`calc(100vh - ${tabbarHeight}rpx - ${safeAreaHeight}px);`">
		<template #navbar>
			<view class="navbar">
				<view class="title">
					<u-navbar
						:borderBottom="false"
						titleColor="#4A4848"
						:background="{
							background: '#ffffff'
						}"
						:isBack="false"
						title="我的"
					></u-navbar>
				</view>
			</view>
		</template>

		<view class="my flex flex-col w100">
			<view class="box1 flex flex-row align-c justify-b" @click="$utils.isLogined()">
				<block v-if="userInfo"><image class="icon1 flex-shrink" :src="$assets.img('/static/images/login-logo.png?t=1')" mode="aspectFill"></image></block>
				<block v-else><image class="icon1 flex-shrink" :src="$assets.img('/static/common/ic-avatar.png?t=1')" mode="aspectFill"></image></block>
				<view class="block1 flex flex-col flex-sub">
					<block v-if="userInfo">
						<view class="txt1">{{ userMobile }}</view>
						<view class="txt2">嗨！围老商户助手欢迎您~</view>
					</block>
					<block v-else>
						<view class="txt1">点击登录</view>
						<view class="txt2">啊！您还没有登录哦~</view>
					</block>
				</view>
			</view>

			<view class="box2">
				<u-cell-group :border="false">
					<u-cell-item icon="share" title="分享好友"><button class="fill-btn rm-btn-css" open-type="share"></button></u-cell-item>
					<u-cell-item icon="file-text" title="服务协议" @click="goService"></u-cell-item>
					<u-cell-item icon="photo" title="证照展示" @click="goLicence"></u-cell-item>
					<!-- #ifdef MP-WEIXIN -->
					<u-cell-item icon="edit-pen" title="意见反馈"><button class="fill-btn rm-btn-css" open-type="feedback"></button></u-cell-item>
					<!-- #endif -->
					<block v-if="!release">
						<u-cell-item
							title="生产接口"
							icon="ie"
							label="切换到生产API接口,该功能线上版本不可见"
							@click="switchApi(0)"
						></u-cell-item>
						<u-cell-item
							title="测试接口"
							icon="cut"
							label="切换到测试API接口,该功能线上版本不可见"
							@click="switchApi(1)"
						></u-cell-item>
					</block>
					<u-cell-item icon="trash" title="清空缓存" @click="clearCache" :borderBottom="false"></u-cell-item>
				</u-cell-group>
			</view>

			<view class="box3" v-if="userInfo"><u-button type="primary" @click="logout">退出当前账号</u-button></view>

			<view class="w100" style="height: 60rpx;"></view>
		</view>
	</pager>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { configList } from '@/api/luch-request.js';

export default {
	props: {
		tabbarHeight: {
			type: Number,
			default: 0
		}
	},
	data() {
		return {
			safeAreaHeight: 0,
			release: true
		};
	},
	computed: {
		...mapState({
			userInfo: ({ app }) => app.userInfo,
			userMobile() {
				const vm = this;
				console.log(vm.userInfo);
				if (vm.userInfo && !vm.$utils.isEmpty(vm.userInfo.uphone)) {
					return vm.$utils.plusXing(vm.userInfo.uphone, 3, 4);
				}
				return null;
			}
		})
	},
	created() {
		const vm = this;

		vm.safeAreaHeight = uni.getSystemInfoSync().safeAreaInsets.bottom;

		vm.release = true;

		// #ifdef MP-WEIXIN
		vm.release = __wxConfig.envVersion == 'release';
		// #endif
	},
	methods: {
		loadData() {
			const vm = this;

			vm.$refs.pager.finish();

			// 如果已经登录了，则尝试获取最新的用户信息
			if (vm.userInfo) {
				vm.$api
					.userAccountInfo()
					.then(res => {
						let userInfo = res.data.userInfo;
						userInfo.token = vm.userInfo.token;
						vm.$store.commit('app/saveUserInfo', userInfo);
						vm.$forceUpdate();
					})
					.catch(error => {
						console.log('刷新用户信息失败...', error);
					});
			}
		},
		clearCache() {
			const vm = this;
			uni.showModal({
				title: '系统提示',
				content: '确定清空缓存数据吗？',
				confirmColor: '#FF0000',
				success(res) {
					if (res.confirm) {
						vm.$store.commit('app/removeUserInfo');
						uni.clearStorageSync();
						uni.showModal({
							showCancel: false,
							content: '已为您清空缓存数据',
							success() {}
						});
					}
				}
			});
		},
		logout() {
			const vm = this;
			uni.showModal({
				title: '系统提示',
				content: '确定退出当前账号吗？',
				confirmColor: '#FF0000',
				success(res) {
					if (res.confirm) {
						vm.$store.commit('app/removeUserInfo');
						uni.showModal({
							showCancel: false,
							content: '已为您安全退出账号',
							success() {}
						});
					}
				}
			});
		},
		goLicence() {
			const vm = this;
			vm.$utils.openPage('/pkgLicence/pages/index/index');
		},
		goService() {
			const vm = this;
			vm.$utils.openWebview('https://agedmall.ejiakanghu.cn/service_word/', '服务协议');
		},
		switchApi(index) {
			const vm = this;

			uni.showModal({
				title: '切换API接口',
				content: `确定切换为【${configList[index].name}】API接口吗？`,
				cancelText: '取消',
				confirmText: '确定',
				confirmColor: '#FF0000',
				success(res) {
					if (res.confirm) {
						if (vm.$XEUtils.indexOf([0, 1], index) != -1) {
							vm.$store.commit('app/removeUserInfo');
							console.clear();
							vm.$utils.clearStorageSync();
							vm.$utils.setStorageSync('api-index', index);
							console.log(`【已切换到${configList[index].name}API接口】${configList[index].baseURL}`);
							uni.showModal({
								showCancel: false,
								title: `已切换到${configList[index].name}API接口地址`,
								content: `${configList[index].baseURL}`,
								success() {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							});
						} else {
							uni.showModal({
								showCancel: false,
								title: `无效的参数`,
								content: `切换API接口地址失败`,
								success() {
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							});
						}
					}
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.my {
	.box1 {
		padding: 40rpx;
		background-color: #ffffff;
		margin-bottom: 20rpx;
		box-shadow: 0rpx 4rpx 10rpx #00000008;

		.icon1 {
			background-color: #ffffff;
			border-radius: 50%;
			width: 120rpx;
			height: 120rpx;
			display: block;
			overflow: hidden;
		}

		.block1 {
			margin-left: 30rpx;
			.txt1 {
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 12rpx;
				color: #000000;
			}
			.txt2 {
				font-size: 26rpx;
				color: #999999;
			}
		}
	}

	.box2 {
		margin-bottom: 20rpx;
		.fill-btn {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
		}
	}

	.box3 {
		padding: 20rpx;
		margin-bottom: 20rpx;
	}
}
</style>
